import { ERenderMode } from '@manycore/custom-ksg-viewer-sdk'
import Radio, { RadioChangeEvent } from 'antd/es/radio';
import { AppStore } from '../../../store';


const RenderModeText = {
    [ERenderMode.SHADING]: '材质模式',
    [ERenderMode.OUTLINE_ONLY]: '线框模式',
    [ERenderMode.OUTLINE_WITH_SHADING]: '材质线框',
    [ERenderMode.TRANSPARENT_LINE]: '透明线框',
}


export function RenderMode() {
    const { appState: { app } } = AppStore.useContainer();


    function changeRenderMode(e: RadioChangeEvent) {
        const renderMode = e.target.value as ERenderMode;
        app!.sceneService.config.renderMode.set(renderMode)
    }

    return (
        <Radio.Group onChange={changeRenderMode} defaultValue={ERenderMode.SHADING}>
            {Object.keys(ERenderMode).map((renderMode) => < Radio.Button key={renderMode} value={renderMode} >{RenderModeText[renderMode]}</Radio.Button>
            )}
        </Radio.Group>
    )
}
